<template>
  <div class="admin-dashboard">
    <!-- 数据概览 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="card in dataCards" :key="card.title">
        <el-card shadow="hover">
          <div class="data-card">
            <div class="card-icon" :style="{ background: card.bgColor }">
              <el-icon><component :is="card.icon" /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">{{ card.title }}</div>
              <div class="card-value">{{ card.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统状态 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>系统访问统计</span>
            </div>
          </template>
          <!-- 访问统计图表 -->
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>操作日志</span>
            </div>
          </template>
          <!-- 日志列表 -->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { DataCard } from '@/types/dashboard'

const dataCards = ref<DataCard[]>([
  {
    title: '用户总数',
    value: '856',
    icon: 'User',
    bgColor: '#409EFF'
  },
  {
    title: '今日访问',
    value: '128',
    icon: 'View',
    bgColor: '#67C23A'
  },
  {
    title: '系统消息',
    value: '12',
    icon: 'Message',
    bgColor: '#E6A23C'
  },
  {
    title: '待处理事项',
    value: '5',
    icon: 'Bell',
    bgColor: '#F56C6C'
  }
])
</script>

<style lang="scss" scoped>
.admin-dashboard {
  .data-card {
    display: flex;
    align-items: center;
    
    .card-icon {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;

      .el-icon {
        font-size: 30px;
        color: #fff;
      }
    }

    .card-info {
      .card-title {
        font-size: 14px;
        color: #909399;
        margin-bottom: 8px;
      }

      .card-value {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
      }
    }
  }

  .chart-section {
    margin-top: 20px;
  }
}
</style> 